<div class="container-fluid">
  <h1>丰信农业</h1>
  <!--其中’ngForm’就是当前这个指令，这样在这个模板里面，我们可以用userForm获得表单的所有数据。
      在使用Angular的验证之前，我们首先需要关闭浏览器默认的验证，不然，如果某一个输入不合法，提交按钮就无法提交。我们在form里添加novalidate：
  -->
  <form class="form-horizontal"  #userForm="ngForm" (ngSubmit)="logForm(userForm)"  novalidate >
    <div class="form-group">
          <!--
            <span class="input-group-addon">@</span>
            <i class="iconfont fxny-icon icon-map">&#xe61b;</i>
            <i class="iconfont fxny-icon icon-map">&#xe61b;</i>
        -->
        <div class="row">
          <label for=""class="col-sm-2 control-label">用户名</label>
          <div class="col-sm-10">
           <input type="text" name="name" id = "name" [(ngModel)]="user.name" #name="ngModel" required minlength="2" placeholder="请输入您的姓名"  class="form-control" >
              <!--
              <span *ngIf="name.pristine" class="label label-primary">未修改</span>
             <span *ngIf="name.dirty" class="label label-warning">已修改</span>
             <span *ngIf="name.valid" class="label label-success">有效</span>
             -->
             <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
                 <p *ngIf="name.errors?.minlength">姓名最小长度为2</p>
                 <p *ngIf="name.errors?.required">必须输入姓名</p>
             </div>
         </div>
     </div>
   </div>
    <div class="form-group">
      <div class="row">
        <label  class="col-sm-2 control-label">手机号：</label>
        <div class="col-sm-10">
           <input type="tel" name="tel" [(ngModel)]="user.tel" placeholder="请输入您的电话" maxlength="11" minlength="11" class="form-control">
           <!--
          <span *ngIf="userForm.controls.tel?.pristine" class="label label-primary">未修改</span>
          <span *ngIf="userForm.controls.tel?.dirty" class="label label-warning">已修改</span>
          <span *ngIf="userForm.controls.tel?.valid" class="label label-success">有效</span>
          -->
          <div [hidden]="userForm.controls.tel?.valid || userForm.controls.tel?.pristine" class="alert alert-danger" tel>
             <p *ngIf="userForm.controls.tel?.errors?.minlength">电话长度必须为11位数字</p>
             <p *ngIf="userForm.controls.tel?.errors?.required">必须输入电话</p>
          </div>
         </div>
      </div>
    </div>
    <div class="form-group">
      <div class="row">
        <label class="col-sm-2 control-label">选择地区：</label>
        <div class="col-sm-10">
           <input type="text" name="city" [(ngModel)]="user.city" placeholder="请选择您的地区" class="form-control" >
           <!--
           <span *ngIf="userForm.controls.city?.pristine" class="label label-primary">未修改</span>
           <span *ngIf="userForm.controls.city?.dirty" class="label label-warning">已修改</span>
           <span *ngIf="userForm.controls.city?.valid" class="label label-success">有效</span>
           -->
           <div [hidden]="userForm.controls.city?.valid || userForm.controls.city?.pristine" class="alert alert-danger">
              <p *ngIf="userForm.controls.city?.errors?.required">必须输入地区</p>
           </div>
         </div>
      </div>
    </div>
    <div class="form-group">

       <button  type="submit" class = "btn btn-success"  [disabled]="!userForm.form.valid" [disabled]="userForm.form.valid==0"  [routerLink]="['/tip2']" >下一步</button>
         <!--
         <a [routerLink]="['/tip2']">下一步</a>
          <button (click)="reset(userForm)">重置</button>
          <button type="submit"  class = "btn"  >保存</button>
       -->
    </div>
  </form>
</div>
